<template>
  <div class="app-album-list">
    <h2 v-if="albums.length === 0">
      内容还在赶来的路上～提醒管理员可以加快收录哦
    </h2>
    <AlbumListItem
      v-for="album in albums"
      :key="album.id"
      class="app-album-list-item"
      :album-id="album.id"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { Album } from '@/api/resources'
import AlbumListItem from './AlbumListItem.vue'

@Component({
  name: 'AlbumList',
  components: {
    AlbumListItem
  }
})
export default class extends Vue {
  @Prop() readonly albums!: Pick<Album, 'id'>[]
}
</script>

<style lang="less" scoped>
@import "../../../styles/theme";

.app-album-list {
  margin-top: 24px;
  border-top: 3px solid @primary-color;
}
</style>
